<!--Copyright (c) 2020 Orca Data Technology(Xi'an)CO.LTD. All rights reserved. * Create by Jisr on 2021/1/19 3:46 下午-->
<template>
    <fragment>
        <header class="container-header" :style="{ height: getContainerHeight }">
            <div :class="['container-header-prev']"></div>
            <div class="tab-view">
                <div class="tab-view-list">
                    <div
                        :class="[
                            'tab-item',
                            tabsActiveIndex === index ? 'tab-item-active' : '',
                            tabsActiveIndex === index + 1 ? 'tab-item-active-gt' : '',
                            tabsActiveIndex === index - 1 ? 'tab-item-active-lt' : ''
                        ]"
                        v-for="(tab, index) in tabs"
                        :key="index"
                        :style="{ width: tabWidth }"
                        @click="setTabsActiveIndex(index)"
                    >
                        <div
                            :class="[
                                'tab-item-inner',
                                tabsActiveIndex < index ? 'tab-inner-active-gt' : '',
                                tabsActiveIndex > index ? 'tab-inner-active-lt' : '',
                                0 === index ? 'tab-inner-first' : ''
                            ]"
                        >
                            <div class="tab-item-label">{{ tab.label }}</div>
                            <span class="close-item-btn" @click.stop="closeItem(index)">
                                <Icon type="md-close" />
                            </span>
                        </div>
                    </div>
                </div>
                <div :class="['add-btn-view', tabsActiveIndex === tabs.length - 1 ? 'tab-item-active-lt' : '']">
                    <div class="add-tab-btn" @click="addNewTab">
                        <Icon type="md-add" />
                    </div>
                </div>
            </div>
            <div :class="['container-header-next']"></div>
        </header>
        <section class="container-body">
            <div class="menu">
                <div class="menu-inner">
                    <div
                        :class="['menu-item']"
                        @click="clickEnterMenu(index)"
                        v-for="(item, index) in menus"
                        :key="index"
                    >
                        <div
                            :class="[
                                'menu-item-view',
                                menusActiveIndex === index ? 'menu-item-active' : 'menu-item-no-active'
                            ]"
                        >
                            <div class="menu-item-icon">
                                <i :class="['iconfont', item.icon]"></i>
                            </div>
                            <span v-if="menusActiveIndex === index">{{ item.label }}</span>
                        </div>
                        <!--                        <div class="menu-item-next"></div>-->
                    </div>
                </div>
            </div>
            <div class="body-view">
                <div class="body-view-inner">
                    <component :is="crtComponent"></component>
                </div>
            </div>
        </section>
    </fragment>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import Debug from '@/views/home/debug.vue';
    import Doc from '@/views/home/doc.vue';
    import Mock from '@/views/home/mock.vue';
    import { HeaderTab } from './types';
    @Component({ components: { Debug, Doc, Mock } })
    export default class MainContainer extends Vue {
        menusActiveIndex = 1;
        crtComponent = 'Debug';
        menus: any[] = [
            {
                label: '文档',
                icon: 'iconwendang',
                componentName: 'Doc'
            },
            {
                label: '测试',
                icon: 'icondebug',
                componentName: 'Debug'
            },
            {
                label: '模拟',
                icon: 'iconmoni',
                componentName: 'Mock'
            }
        ];
        tabs: HeaderTab[] = [
            {
                label: 'New Tab New TabNew Tab'
            }
        ];
        tabsActiveIndex = 0;
        get tabWidth(): string {
            if (100 / this.tabs.length > 12) {
                return '150px';
            }
            return 100 / this.tabs.length + '%';
        }
        get getContainerHeight() {
            return '45px';
        }
        public setTabsActiveIndex(index: number): void {
            this.tabsActiveIndex = index;
        }
        public clickEnterMenu(index: number): void {
            this.menusActiveIndex = index;
            this.crtComponent = this.menus[index].componentName;
        }
        public closeItem(index: number): void {
            if (this.tabs.length === 1) {
                return;
            } else {
                if (index > this.tabsActiveIndex) {
                    this.tabs.splice(index, 1);
                }
                if (index <= this.tabsActiveIndex) {
                    if (this.tabsActiveIndex === 0) {
                        this.tabs.splice(index, 1);
                        // this.tabsActiveIndex += 1;
                    } else {
                        this.tabs.splice(index, 1);
                        //删前面的
                        this.tabsActiveIndex -= 1;
                    }
                }
            }
        }
        public addNewTab(): void {
            if (this.tabs.length === 20) {
                return;
            }
            this.tabs.push({
                label: 'New Tab'
            });
            this.tabsActiveIndex = this.tabs.length - 1;
        }
    }
</script>

<style lang="less" scoped src="./mainContainer.less"></style>
